<template>
  <div class="fr page">
    <div class="sui-pagination clearfix">
      <ul>
        <li class="prev" :class="{disabled:pageNo < 2}">
          <a  @click="pageNo > 1 && $emit('changePageNo', pageNo - 1)" href="javascript:;">«上一页</a>
        </li>
        <li :class="{active: pageNo == 1}">
          <a @click="$emit('changePageNo', 1)"> {{1}} </a>
        </li>
        <!-- <li v-show="current - 1 >  continues / 2" class="dotted">
          <span>...</span>
        </li> -->
        <li v-show="startAndEnd.start > 2" class="dotted">
          <span>...</span>
        </li>
        <li v-for="(_, index) in startAndEnd.end - startAndEnd.start - 1" :key="index" :class="{active: startAndEnd.start + index + 1  == pageNo}">
          <a @click="pageNo != startAndEnd.start + index + 1 && $emit('changePageNo', startAndEnd.start + index + 1)" href="javascript:;">{{startAndEnd.start + index + 1}}</a>
        </li>

        <!-- <li v-show="totalPages - current >  continues / 2" class="dotted">
          <span>...</span>
        </li> -->
        <li v-show="startAndEnd.end < totalPages - 1" class="dotted">
          <span>...</span>
        </li>
        <li :class="{active: pageNo == totalPages}" >
          <a @click="$emit('changePageNo', totalPages)">{{totalPages}}</a>
        </li>
        <li class="next" :class="{disabled:pageNo >= totalPages}">
          <a @click="totalPages > pageNo && $emit('changePageNo', pageNo + 1)" href="javascript:;">下一页»</a>
        </li>
      </ul>
      <div style="line-height: 40px"><span>共 {{ total }} 条&nbsp;</span></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Pagitation',
  props: ['total', 'pageNo', 'pageSize', 'continues', 'totalPages'],
  data(){
    return {
      current: this.pageNo,
    }
  },
  computed: {
    // 计算起始开始页
    startAndEnd(){
      const {pageNo, continues, totalPages} = this
      let start, end
      // start = pageNo - Math.trunc(continues / 2)
      // end = pageNo + Math.trunc(continues / 2)
      // this.current = pageNo

      // 如果连续页码大于等于总页码的时候，要把连续页码的开始设为1，结束设为总页数
      if(continues >= totalPages) {
        start = 1
        end = totalPages
        
      } else { 
        // totalPages > continues
        // 
        start = pageNo - Math.trunc(continues / 2) 
        end = pageNo + Math.trunc(continues / 2)

        if(start < 1) {
          start = 1
          end = continues
        }

        if(end > totalPages) {
          end = totalPages
          start = totalPages - continues + 1
        }

      }

      if(pageNo > end) {
        this.$emit(end)
      }
      if(pageNo < start) {
        this.$emit(start)
      }

      return {start, end}
    }
  },  
}
</script>

<style lang="less" scoped>
.page {
  // width: 733px;
  height: 66px;
  overflow: hidden;
  float: right;

  .sui-pagination {
    margin: 18px 0;

    ul {
      margin-left: 0;
      margin-bottom: 0;
      vertical-align: middle;
      // width: 490px;
      float: left;

      li {
        line-height: 18px;
        display: inline-block;

        a {
          position: relative;
          float: left;
          line-height: 18px;
          text-decoration: none;
          background-color: #fff;
          border: 1px solid #e0e9ee;
          margin-left: -1px;
          font-size: 14px;
          padding: 9px 18px;
          color: #333;
        }

        &.active {
          a {
            background-color: #fff;
            color: #e1251b;
            border-color: #fff;
            cursor: default;
          }
        }

        &.prev {
          a {
            background-color: #fafafa;
          }
        }

        &.disabled {
          a {
            color: #999;
            cursor: not-allowed;
          }
        }

        &.dotted {
          span {
            margin-left: -1px;
            position: relative;
            float: left;
            line-height: 18px;
            text-decoration: none;
            background-color: #fff;
            font-size: 14px;
            border: 0;
            padding: 9px 18px;
            color: #333;
          }
        }

        &.next {
          a {
            background-color: #fafafa;
          }
        }
      }
    }

    div {
      color: #333;
      font-size: 14px;
      float: right;
      width: 241px;
    }
  }
}
</style>